<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="20" :xs="24">
        <div style="display: flex; justify-content: space-around">
          <div class="block">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy.MM.dd.HH.mm.ss"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="assetName" label="资产名称" align="center">
      </el-table-column>
      <el-table-column prop="elecEnergy" label="电能" align="center">
      </el-table-column>
      <el-table-column prop="hotWaterEnergy" label="热水" align="center">
      </el-table-column>
      <el-table-column prop="coldWaterEnergy" label="冷水" align="center">
      </el-table-column>
      <el-table-column prop="natGasEnergy" label="天然气" align="center">
      </el-table-column>
      <el-table-column prop="comAirEnergy" label="压缩空气" align="center">
      </el-table-column>
      <el-table-column prop="indWaterEnergy" label="工业水" align="center">
      </el-table-column>
      <el-table-column prop="wasteWaterEnergy" label="废水" align="center">
      </el-table-column>

      <el-table-column prop="pureWater" label="纯水" align="center">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
    />
  </div>
</template>

<script>
import { listMediumConsumption } from "../../../../api/mediumConsumption.js";
export default {
  created() {
    this.getList();
  },
  computed: {
    time: {
      get() {
        if (this.taskForm.startTime && this.taskForm.endTime) {
          return [this.taskForm.startTime, this.taskForm.endTime];
        } else {
          return [];
        }
      },
      set(v) {
        if (v != null) {
          this.taskForm.startTime = v[0];
          this.taskForm.endTime = v[1];
        } else {
          this.taskForm.startTime = "";
          this.taskForm.endTime = "";
        }
      },
    },
  },
  methods: {
    /**查询按钮 */
    // handleQuery() {
    //   this.getList();
    // },
    /** 查询介质能耗 */

    resetQuery(){
      this.time=[]
       let obj = {
        startStatisticTime: "",
        endStatisticTime: ""
      };
      listMediumConsumption(obj).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    
    getList() {
      let obj = {
        startStatisticTime: this.taskForm.startTime,
        endStatisticTime: this.taskForm.endTime,
      };
      listMediumConsumption(obj).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      taskForm: {
        startTime: "",
        endTime: "",
      },
      loading:true,
    };
  },
};
</script>